<template>
  <div>
    <div style="min-height: 400px">
      <el-steps :active="active" simple finish-status="success" class="u-m-b-20">
        <el-step title="文件选择" icon="el-icon-s-help" description="请选择要加密的文件和文件夹" />
        <el-step title="加密" icon="el-icon-coin" description="请检查当前数据库安装文件和更新文件是否正确" />
        <el-step title="应用下载" icon="el-icon-coin" description="请选择打包的配置项" />
      </el-steps>
      <!--检查应用信息-->
      <div v-if="active === 0">
        <el-alert description="请选择并确认要加密的文件和文件夹" type="error" title="说明" class="!my" />
        <div v-loading="loading" class="u-m-t-20">
          <el-form v-if="!loading && files.length > 0" ref="form" :model="form" label-width="80px">
            <el-form-item label="加密文件">
              <el-checkbox-group v-model="form.checkedFiles">
                <el-checkbox v-for="file in files" :key="file" :label="file" :value="file" class="u-b-5" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="保存配置">
              <el-switch v-model="form.default" />
              <p class="dk-help" style="line-height: 1.5; margin-top: 4px">保存后，下次默认选中选择的文件夹/文件</p>
            </el-form-item>
          </el-form>
          <el-empty v-else description="请检查是否未打包" />
        </div>
      </div>
      <div v-if="active === 1">
        <!--        表单-->
        <div style="text-align: center">
          <img src="@/assets/default/loading.gif" width="240" alt="" />
          <p style="font-size: 24px">加密中...</p>
        </div>
      </div>
      <div v-if="active === 2">
        <el-result icon="success" title="打包成功" sub-title="请点击下方按钮下载应用包，并检查是否正确">
          <template #extra>
            <el-button type="primary" @click="handleDown()">下载</el-button>
          </template>
          <template #sub-title>
            <p>请点击下方按钮下载应用包，并检查是否正确</p>
            <p class="mt-2">打包日期：{{ encrypt.date }}</p>
          </template>
        </el-result>
      </div>
    </div>
    <div class="footer">
      <el-button v-if="active === 0" type="primary" style="width: 200px" :disabled="files.length <= 0" @click="handleEncrypt()"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import { createEncrypt, getFiles, show } from '@/api/addons/version'

export default {
  name: 'Encrypt',
  props: {
    aid: {
      default: 0,
      type: [Number, String]
    },
    vid: {
      default: 0,
      type: [Number, String]
    }
  },
  data() {
    return {
      form: {
        checkedFiles: [],
        default: 0
      },
      active: 0,
      dialogVisible: false,
      dialogVersionVisible: false,
      version: {
        addon: {}
      },
      encrypt: {},
      files: [],
      checkedFiles: [],
      disabled: false,
      loading: true,
      down_url: ''
    }
  },
  computed: {},
  mounted() {
    this.getEncryptMsg()
    this.getFiles()
  },
  methods: {
    getFiles() {
      getFiles(this.vid)
        .then((res) => {
          this.files = res.data.files
          if (res.data.encrypt_config) {
            this.form = res.data.encrypt_config
          }
          this.loading = false
        })
        .catch((res) => {
          this.loading = false
        })
    },
    showEncryptLog() {
      this.encrypt = this.version.encrypt
      this.down_url = this.version.encrypt_url
      this.active = 2
    },
    getEncryptMsg() {
      show(this.vid).then((res) => {
        this.version = res.data
        if (this.version.encrypt) {
          this.$msgbox({
            title: '提示',
            message: '该版本已经打包过，是否查看？',
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                this.showEncryptLog()
                done()
              } else {
                done()
              }
            }
          })
        }
      })
    },
    handleEncrypt() {
      this.active = 1
      createEncrypt(this.vid, this.form)
        .then((res) => {
          this.encrypt = res.data.encrypt
          this.down_url = res.data.url
          this.active = 2
          this.$message.success('加密成功')
        })
        .catch((res) => {
          this.active = 0
        })
    },
    handleDown() {
      if (this.down_url) {
        window.open(this.down_url)
      } else {
        this.$message.error('下载地址不存在')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.pack-sql {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  p {
    padding: 10px;
    font-size: 16px;
  }
  .el-icon-coin {
    font-size: 100px;
    color: #409eff;
  }
  .sql-upgrade {
    width: 200px;
    svg {
      fill: #f94747;
    }
  }
  .sql-install {
    width: 200px;
    svg {
      fill: #46b8da;
    }
  }
  svg {
    width: 60%;
  }
}
.help {
  color: #909399;
  font-size: 12px;
}
.footer {
  text-align: center;
  margin-top: 20px;
}
</style>
